$zindex-picker: 1000
$timepicker-panel-column-width: 4rem

.fui-timepicker
  display: inline-block
  position: relative

  &-input
    @include input-radius-box
    width: 100px
    height: $input-height

  &-icon
    position: absolute
    top: 0.5rem
    right: 0.5rem
    cursor: pointer

    &:hover
      svg
        fill: $brand-primary

    svg
      fill: $icon-secondary

  &-panel
    z-index: $zindex-picker
    margin: 2px 0

  &-content
    position: relative
    outline: none
    list-style: none
    line-height: 1.5
    font-size: $font-md
    text-align: left
    background-color: $bg-body
    border-radius: 2px
    border: 1px solid $border-default
    background-clip: padding-box
    overflow: hidden

  &-select
    flex: auto
    font-size: $font-md
    border-left: 1px solid $border-default
    box-sizing: border-box
    width: $timepicker-panel-column-width
    overflow: hidden
    position: relative // Fix chrome weird render bug
    max-height: 144px

    &:hover
      overflow-y: auto

    &:first-child
      border-left: 0
      margin-left: 0

    &:last-child
      border-right: 0

    &:only-child
      width: 100%

    ul
      list-style: none
      box-sizing: border-box
      margin: 0
      padding: 0 0 120px
      width: 100%

    li
      list-style: none
      box-sizing: content-box
      margin: 0
      padding: 0 0 0 8px
      width: 100%
      height: 24px
      line-height: 24px
      text-align: left
      cursor: pointer
      user-select: none
      transition: background 0.3s

    li:hover
      background: $bg-hover

    li.selected
      background: $bg-hover
      font-weight: bold
      &:hover
        background: $bg-hover

  &-combobox
    display: flex
